<template>
	<!--pages/item/item.wxml-->
	<view v-if="itemObj.product_details_info" class="item_block">
		<!-- 内容 -->
		<view class="content_block">
			<!-- 详情 -->
			<view class="xiangqing">
				<!-- 图片部分 -->
				<view>
					<image class="con_img" :src="xiangqing.pro_pic_url"></image>
					<view class="con_title">
						<text>{{xiangqing.pro_title}}</text>
					</view>
				</view>
				<!-- 信息部分1 -->
				<view class="first_block">
					<view class="first_con">
						<view>
							<text class="iconfont icon-tianqi"></text>
							<text style="margin-left: 10rpx;">适宜季节</text>
						</view>
						<view style="display: flex;">
							<view v-for="(item,index) in seasonArr" :key="index"
								style="font-size: 24rpx;display: flex;">
								{{ item.season }}
								<text v-if="index<seasonArr.length-1">、</text>
							</view>
						</view>
					</view>
					<view class="second_con">
						<view style="display: flex; margin-right: 20rpx;">
							<text class="iconfont icon-zhuti"></text>
							<text style="margin-left: 10rpx; white-space: nowrap;">主题</text>
						</view>
						<view style="display: flex; overflow: hidden; text-overflow: ellipsis;">
							<text style="font-size: 24rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
								{{ productTagName.join('、') }}
							</text>
						</view>
					</view>
				</view>
				<!-- 信息部分2 -->
				<view class="second_block">
					<view class="first_row">
						<view>
							<text class="iconfont icon-wuliaojiageleixing"></text>
							<text class="con_txt">单价</text>
						</view>
						<view class="right">
							<text style="font-size: 24rpx;">{{xiangqing.amount}}元起</text>
						</view>
						<view class="right">
							<text style="font-size: 24rpx;">{{ xiangqing.limitedDiscount }}元起</text>
						</view>
					</view>
					<view class="first_row">
						<view>
							<text class="iconfont icon-renshutongji"></text>
							<text class="con_txt">人数</text>
						</view>
						<view class="right">
							<text style="font-size: 24rpx;">{{itemObj.product_details_info.pon_num_end}}成人></text>
						</view>
						<view class="right">
							<text style="font-size: 24rpx;">{{ xiangqing.limitedDiscount }}儿童></text>
						</view>
					</view>
					<view class="take_date">
						<view>
							<text class="iconfont icon-shijian"></text>
							<text class="con_txt">日期</text>
						</view>
						<view>
							<text>{{xiangqing.end_date}}</text>
						</view>
					</view>
					<view class="take_off">
						<view>
							<text class="iconfont icon-5"></text>
							<text class="con_txt">出发</text>
						</view>
						<view>
							<text>{{xiangqing.end_date}}</text>
						</view>
					</view>
				</view>
				<!-- 信息部分3 -->
				<view class="third_block">
					<view class="first_con" style="border-bottom: 2rpx solid #eee;">
						<view>
							<text class="iconfont icon-shijian"></text>
							<text style="margin-left: 10rpx;">周期</text>
						</view>
						<view>
							<text>{{ xiangqing.routing_dat }}天{{ xiangqing.routing_nigth }}晚</text>
						</view>
					</view>
					<view class="second_con">
						<view>
							<text class="iconfont icon-zhuti"></text>
							<text style="margin-left: 10rpx;">主题</text>
						</view>
						<text>{{ itemObj.country }}</text>
					</view>
				</view>
				<!-- 信息部分4 -->
				<view class="second_con fourth_block">
					<view>
						<text class="iconfont icon-tubiaolunkuo-"></text>
						<text style="margin-left: 10rpx;">商家</text>
					</view>
					<text>{{ itemObj.seller_nick_name }}></text>
				</view>
				<view class="dingzhixing">
					<view class="dingzhixing_con">旅行，有什么不同？></view>
				</view>
			</view>
		</view>
		<!-- 行程概要 -->
		<view id="gaiyao" style="position: relative; top: -100rpx;"></view>
		<view class="gaiyao light_spot">
			<view class="light_spot_block">
				<view class="text">行程概要</view>
			</view>
			<view class="gaiyao_con">
				<view class="day_data" v-for="(item,index) in xiangqing.product_trip_head" :key="item.dayIndex">
					<view class="round">D{{item.day}}</view>
					<view>
						<view class="trip_way">{{item.trip_way}}</view>
						<view style="color: #848484;font-size:24rpx;margin-top: 6rpx;width: max-content;"> 住宿地：{{ item.stay_name }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 行程详情 -->
		<view id="xiangxi" style="position: relative; top: -100rpx;"></view>
		<view class="xingcheng_msg light_spot">
			<view class="light_spot_block">
				<view class="text">行程详情</view>
			</view>
			<view v-for="(item,index) in tripDetails" :key="item.day"
				class="msg_list">
				<view class="xiangqing_day">
					day{{ item.day}}
				</view>
				<view v-for="it in item.product_trip_way" :key="it.start_way+it.end_trip+it.trip_way_type"
					style="width: max-content; margin: auto;">
					<text> {{ it.start_way }}</text>
					<text v-if="it.start_way !== it.end_trip" :class="it.transnationalFlag ? 'feiji' : 'qiche'"></text>
					<text v-if="it.start_way !== it.end_trip">{{it.end_trip }}</text>
				</view>
				<view class="msg_con">
					<text :id="`day-${index}`" class="msgCon_text" decode="true" space="ensp" :class="{ showTips: item.flag }">
						{{ item.product_trip_poi[0].emotion_info }}
					</text>
					<view class="show-or-noshow" @click="showTag(index)">
						 {{ item.flag ? "收起" : "查看全部"}}
					</view>
				</view>
				<view class="msg_smallCon">
					<view class="smallCon_left">
						<view class="left_img"></view>
						<view class="left_text">{{ item.stay_name }}</view>
					</view>
					<view class=" smallCon_right">
						<view class="right_img"></view>
						<view class="right_text">{{ item.hotel_name }}</view>
					</view>
				</view>
				<view class="msg_swiper">
					<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration" indicator-color="#fff" indicator-active-color="#4EDDF9"
						:circular="circular" class="swiper-con" style=" width: 680rpx;height: 470rpx;">
						<swiper-item v-for="it in item.product_trip_poi_pic" :key="it.photoUrl">
							<image style="width: 680rpx;min-height: 420rpx;" :src="it.photo_url"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<!-- 价格说明 -->
		<view id="jiage" style="position: relative; top: -100rpx;"></view>
		<view class="light_spot price_block">
			<view class="light_spot_block">
				<view class="text">价格说明</view>
			</view>
			<view class="table border white jiage_table">
				<view class="th">
					<view class="td jiage_td"></view>
					<view class="td jiage_td">报价/人</view>
					<view class="td jiage_td">人数</view>
				</view>
				<view class="tr">
					<view class="td jiage_td" style="color: black;">成人</view>
					<view class="td jiage_td" style="color:#f49155">￥{{ xiangqing.man_price }}</view>
					<view class="td jiage_td" style="color: #7f7f7f;">
						<view class="rec" @click="recNum">-</view>
						<text style="color:#f49155">{{ numberNum }}</text>
						<view class="add" @click="addNum">+</view>
					</view>
				</view>
				<view class="tr">
					<view class="td jiage_td" style="color: black;">儿童</view>
					<view class="td jiage_td" style="color:#f49155">￥{{ xiangqing.children_cost }}</view>
					<view class="td jiage_td" style="color: #7f7f7f;">
						<view class="rec">-</view>
						<text>{{ xiangqing.children_price }}</text>
						<view class="add">+</view>
					</view>
				</view>
			</view>
			<view class="all_block">
				<text>总报价金额</text>
				<text style="color:#f49155">￥{{ allPrice }}</text>
			</view>
			<view class="instructions">
				<text>*儿童指12岁以下且不占床位。</text>
				<text>*以上价格均为预估报价，准确报价需确认出发日期后才能确定。</text>
			</view>
			<!-- 价格详情说明 价格 -->
			<view class="xiangqing">
				<view class="definite_block">
					<view class="table stripe border border_radius">
						<view class="th">
							<view class="td xiangqing_td">价格包括</view>
							<view class="td xiangqing_td">备注</view>
						</view>
						<view v-for="item in itemObj.product_details_info.product_price.include_price"
							:key="item.price_dec" class="tr">
							<view class="td xiangqing_td" style="color: #7f7f7f;">{{ item.price_dec }}</view>
							<view class="td xiangqing_td" style="color: #7f7f7f;">{{ item.price_remark }}</view>
						</view>
					</view>
				</view>
				<!-- 价格不包括 -->
				<view class="not_need">
					<view class="table stripe border border_radius">
						<view class="th">
							<view class="td xiangqing_td">价格不包括</view>
							<view class="td xiangqing_td">备注</view>
						</view>
						<view v-for="item in itemObj.product_details_info.product_price.no_include_price"
							:key="item.price_dec" class="tr">
							<view class="td xiangqing_td" style="color: #7f7f7f;">{{ item.price_dec }}</view>
							<view class="td xiangqing_td" style="color: #7f7f7f;">{{ item.price_remark }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 右侧按钮 -->
		<view class="side_block" v-if="isShow">
			<view class="go_top" @click="goItemTop">顶部</view>
			<view class="go_home" @click="goHome">
				<text class="iconfont icon-home"></text>
			</view>
			<!-- 微信分享 -->
			<view class="go_share">
				<text class="iconfont icon-weixin"></text>
				<button class="go_shareBtn" open-type="share"></button>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom_block">
			<view class="left_block">
				<view class="left_second" @click="collection(itemObj)" style="padding-top: 14rpx;">
					<text class="iconfont icon-shoucang2"></text>
					<text style="font-size:24rpx">{{ index === -1 ? '收藏' : '已收藏' }}</text>
				</view>
				<view class="left_second cel_icon" @click="btnCel">
					<text style="font-size: 52rpx;" class="iconfont icon-dianhua"></text>
					<text class="cel_num" style="font-size:24rpx">电话</text>
				</view>
				<view class="left_second cel_icon">
					<text style="font-size: 52rpx;" class="iconfont icon-lianxikefu"></text>
					<text class="cel_num" style="font-size:24rpx">客服</text>
					<!--button里有open-type属性：开放功能，有效值有contact，打开客服会话  -->
					<button open-type="contact" class="kefubtn"></button>
				</view>
			</view>
			<view class="right_block">
				<text @click="goAddPlan">立即计划</text>
			</view>
		</view>
		<!-- tabbar -->
		<view v-if="type" class="item_tabbar ac">
			<view :class="gaiyaotype?'active':''" @click="topTitle('gaiyao')">行程概要</view>
			<view :class="xiangxitype?'active':''" @click="topTitle('xiangxi')">详细行程</view>
			<view :class="jiagetype?'active':''" @click="topTitle('jiage')">价格说明</view>
		</view>
	</view>
</template>

<script>
	import http from "@/utils/http.js";
	export default {
		data() {
			return {
				indicatorDots: true, //轮播是否有小圆点
				vertical: false, //false 横向   true 纵向
				autoplay: true, //自动播放
				interval: 2000, //动画时间
				duration: 500, //间隔时间
				circular: true, //衔接动画
				background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
				index: -1, // 标记数据是否收藏，未收藏为-1，已收藏为索引值
				numberNum: 0, // 定义人数的数量
				allPrice: 0, // 定义总数的变量
				itemObj: {}, // 大的数组
				seasonArr: [], // 适宜季节数组
				productType: [], // 主题数组
				productTagName: [], // 存储主题部分的
				xiangqing: {}, // 具体详情内容
				msg_swiperArr: [], // 轮播图数组
				tripDetails:[], 
				gaiyaotype: true,
				xiangxitype: false,
				jiagetype: false,
				top: { //概要离顶部的距离
					gaiyaoTop: 0,
					xiangxiTop: 0,
					jiageTop: 0,
				},
				type: false ,//false  tabbar不显示； true tabbar显示
				isShow: false, // 右侧悬浮按钮
				flag: false
			}
		},
		onLoad: function(option) {
			console.log(option)
			this.productTagName = [];
			// 获取内容页数据
			http.request("product/product/getProductDetails/" + option.id, "", "get").then(res => {
				// console.log(res);
				this.itemObj = res.data;
				console.log(res);
				this.seasonArr = res.data.product_base_info.product_season;
				this.productType = res.data.product_base_info.product_type;
				// 检索文字数组，用于在主题位置展示
				this.productType.forEach(item => {
					this.productTagName.push(item.type);
				});
				this.tripDetails = res.data.product_details_info.product_trip_details.map(item => {
					return {
						flag :false,
						...item
					}
				});
				this.xiangqing = res.data.product_base_info;
				this.hasCollection();
			}).then(() => {
				//获取某个 view离顶部的距离的
				// ifndef 除了APP 其他均可
				// #ifndef APP-PLUS
				uni.createSelectorQuery().in(this).select("#gaiyao").boundingClientRect(data => {
					this.top.gaiyaoTop = data.top
				}).exec();
				uni.createSelectorQuery().in(this).select("#xiangxi").boundingClientRect(data => {
					this.top.xiangxiTop = data.top
				}).exec();
				uni.createSelectorQuery().in(this).select("#jiage").boundingClientRect(data => {
					this.top.jiageTop = data.top
				}).exec();
				// #endif
				// ifdef 仅出现在APP
				// #ifdef APP-PLUS
				setTimeout(() => {
					uni.createSelectorQuery().in(this).select("#gaiyao").boundingClientRect(data => {
						this.top.gaiyaoTop = data.top
					}).exec();
					uni.createSelectorQuery().in(this).select("#xiangxi").boundingClientRect(data => {
						this.top.xiangxiTop = data.top
					}).exec();
					uni.createSelectorQuery().in(this).select("#jiage").boundingClientRect(data => {
						this.top.jiageTop = data.top
					}).exec();
				}, 300)
				// #endif
			})
		},
		//页面滚动时触发的钩子  tabbar和右侧悬浮按钮是否展示
		onPageScroll(ev) {
			const top = ev.scrollTop + 10;
			const {
				gaiyaoTop,
				xiangxiTop,
				jiageTop,
			} = this.top;

			if (top >= gaiyaoTop) {
				// tabbar显示
				this.type = true;
				// 右侧悬浮按钮展示
				this.isShow = true
			} else {
				this.type = false;
				this.isShow = false
			}

			//滚动时需要切换 激活状态的tabbar
			if (top >= gaiyaoTop && top < xiangxiTop) {
				this.gaiyaotype = true;
				this.xiangxitype = false;
				this.jiagetype = false;
			} else if (top >= xiangxiTop && top < jiageTop) {
				this.gaiyaotype = false;
				this.xiangxitype = true;
				this.jiagetype = false;
			} else {
				this.gaiyaotype = false;
				this.xiangxitype = false;
				this.jiagetype = true;
			}
		},
		computed: {
			collectionMsg() {
				return this.$store.state.collectionMsg;
			},
			hasLogin() {
				// store.state 来获取状态对象 把状态对象赋值给内部对象
				return this.$store.state.hasLogin;
			},
		},
		methods: {
			// 电话
			btnCel() {
				uni.makePhoneCall({
					phoneNumber: '13637589645' //拨打电话
				});
			},
			//返回首页
			goHome() {
				// uni-app自带的API 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			// 回到顶部
			goItemTop(e){
				// uni-app内置的API
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},
			// 标题跳转
			topTitle(id) {
				uni.pageScrollTo({
					scrollTop: this.top[`${id}Top`],
					duration: 300,
				});
			},
			// 立即计划
			goAddPlan() {
				if (!this.hasLogin) {
					uni.showModal({
						title: "提示",
						content: "登录才能查看",
						showCancel: true,
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login',
								});
							}
						},
					});
					return;
				}else {
					uni.navigateTo({
						url: '/pages/custom/add',
					});
				}
			},
			// 改变index的值
			hasCollection() {
				// findIndex方法会找到目标所在的具体索引，没有就返回-1也就是未收藏的时候为-1，有就返回索引
				this.index = this.collectionMsg.findIndex((item) => {
					if (item.pro_id === this.itemObj.pro_id) {
						return item
					}
				});
				console.log(this.index);
			},
			// 收藏
			collection(itemObj) {
				if (!this.hasLogin) {
					uni.showModal({
						title: "提示",
						content: "登录才能查看",
						showCancel: true,
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login/login",
								});
							}
						},
					});
					return;
				}
				if (this.index === -1) {
					// 通过commit触发状态变更
					this.$store.commit("collectionMsg", itemObj);
					uni.showToast({
						title: '收藏成功',
						duration: 2000
					});
				} else {
					this.$store.commit("delCollectionMsg", this.index);
					uni.showToast({
						title: '取消收藏',
						duration: 2000,
						icon: "error"
					});
				}
				this.hasCollection();
			},
			// 人数减
			recNum() {
				if (this.numberNum > 0) {
					this.numberNum = this.numberNum - 1;
					this.allPrice = this.numberNum * this.xiangqing.man_price
				}
			},
			// 人数加
			addNum() {
				console.log(this.numberNum > 0)
				if (this.numberNum < this.itemObj.product_details_info.pon_num_end) {
					this.numberNum = this.numberNum + 1;
					this.allPrice = this.numberNum * this.xiangqing.man_price
				}else {
					uni.showToast({
						title: `最多${this.itemObj.product_details_info.pon_num_end}人一组`,
						icon: "error",
						duration: 3000
					});
				}
			},
			// 展示查看更多或收起
			showTag(index) {
				this.tripDetails[index].flag = !this.tripDetails[index].flag;
				uni.pageScrollTo({
				 selector: `#day-${index}`,
				 duration: 300
				});
			}
		},
	}
</script>

<style scoped>
	.table {
		width: max-content;
		margin: auto;
	}

	.th {
		color: black;
		text-align: center;
		background-color: #e7e7e7;
	}

	.th,
	.tr {
		display: flex;
	}
	.tr .xiangqing_td {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.td {
		display: inline-block;
		padding: 18rpx 14rpx;
		font-size: 28rpx;
	}

	.table.border {
		border: 2rpx solid #dbdada;
	}

	.table.border .td {
		border-right: 2rpx solid #dbdada;
		border-bottom: 2rpx solid #dbdada;
	}

	.table.border .td:last-child {
		border-right: 0;
	}

	.table.border .tr:last-child .td {
		border-bottom: 0;
	}


	.table.stripe .tr:nth-of-type(even) {
		background: #F9F9F9;
	}

	.table.white {
		background-color: #FFFFFF;
	}

	.table.border_radius {
		border-radius: 20rpx 20rpx 15rpx 15rpx;
		overflow: hidden;
	}

	/* pages/item/item.wxss */
	.item_block {
		height: 100%;
		margin-bottom: 100rpx;
	}

	.content_block {
		height: max-content;
		display: flex;
		flex-direction: column;
	}

	.search_products {
		height: 112rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 2rpx solid #dddcdc;
		font-size: 36rpx;
		color: #c8c8c8;
	}

	.xiangqing {
		width: 100%;
		background-color: #F2F2F2;
		flex: 1;
		overflow: auto;
	}

	.con_img {
		width: 750rpx;
		height: 400rpx;
	}

	.con_title {
		width: 750rpx;
		height: 70rpx;
		background-color: #dddddd;
		line-height: 70rpx;
		text-align: center;
		margin-top: -6rpx;
		font-size: 36rpx;
		color: #434343;
		font-weight: bold;
	}

	.first_block,
	.fourth_block {
		width: 100%;
		height: 192rpx;
		background-color: #fff;
		margin: 20rpx 0;
		padding: 0 10rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #7e7e7e;
	}

	.first_con,
	.second_con {
		width: 100%;
		height: 92rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx 0 20rpx;
		box-sizing: border-box;
		line-height: 92rpx;
	}

	.first_row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;
	}

	.first_row view {
		flex: 1;
	}

	.first_row view:nth-of-type(2) {
		position: relative;
		padding: 8rpx 20rpx;
	}

	.first_row view:nth-of-type(2):before,
	.first_row view:nth-of-type(2):after {
		content: '';
		height: 40rpx;
		width: 2rpx;
		background-color: #cccccc;
		position: absolute;
	}

	.first_row view:nth-of-type(2):before {
		left: 0;
	}

	.first_row view:nth-of-type(2):after {
		right: 0;
	}

	.right {
		display: flex;
		justify-content: flex-end !important;
		align-items: center;
	}

	.first_block .first_con {
		border-bottom: 2rpx solid #eee;
	}

	.second_block {
		width: 100%;
		height: 384rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.second_block,
	.third_block {
		padding: 0 10rpx;
		font-size: 28rpx;
		color: #7e7e7e;
		box-sizing: border-box;
	}

	.bottom_block {
		width: 750rpx;
		height: 100rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		border-top: 2rpx solid #E2E2E2;
	}

	.first_row,
	.take_date {
		height: 92rpx;
		border-bottom: 2rpx solid #eee;
		padding: 0 10rpx;
		line-height: 92rpx;
		box-sizing: border-box;
	}

	.take_off {
		height: 92rpx;
		padding: 0 10rpx;
		line-height: 92rpx;
		box-sizing: border-box;
	}

	.second_block .take_date,
	.second_block .take_off {
		display: flex;
		justify-content: space-between;
	}

	.con_txt {
		margin-left: 10rpx;
		box-sizing: border-box;
	}

	.third_block {
		width: 100%;
		height: 192rpx;
		background-color: #fff;
		margin-top: 20rpx;
		box-sizing: border-box;
	}

	.fourth_block {
		height: 92rpx;
	}

	.dingzhixing {
		padding: 16rpx;
		margin: 0 20rpx;
		box-sizing: border-box;
	}

	.dingzhixing {
		background: #cfd2d3;
		color: #fff;
		font-size: 28rpx;
		text-align: center;
		padding: 24rpx 0;
		box-sizing: border-box;
	}

	.light_spot,
	.gaiyao {
		width: 100%;
		background-color: #F2F2F2;
		padding: 40rpx 0;
		border-bottom: 20rpx solid #d8dadb;
		position: relative;
		box-sizing: border-box;
		text-align: center;
	}

	.light_spot .text {
		width: 100%;
		/* margin: auto; */
		/* width: 400rpx; */
		height: 100rpx;
		background: url("http://www.51houniao.com/wx/customer/classic/images/title_bg_03.png?v=89d4336") center center no-repeat;
		background-size: 308rpx;
		line-height: 100rpx;
		/* background-repeat: no-repeat; */
	}

	/* .light_spot .txt {
		position: absolute;
		top: 65rpx;
		left: 315rpx;
	} */

	.gaiyao_con {
		width: max-content;
		margin: auto;
	}

	.day_data {
		width: 674rpx;
		height: 92rpx;
		border-bottom: 2rpx dashed #a8a8a8;
		padding: 14rpx;
		display: flex;
		align-items: center;
	}

	.round {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #758082;
		border-radius: 50%;
		color: #fff;
		margin-right: 20rpx;
	}
	
.day_data .trip_way{
	color: #666666;
	font-size: 28rpx;
	width: max-content;
	max-width: 560rpx;
	text-align: initial;
}
	.msg_list {
		margin-bottom: 20rpx;
	}

	.xiangqing_day {
		width: 50%;
		margin: auto;
		border-bottom: 4rpx solid #dddcdc;
		text-align: center;
		font-family: "SingleMaltaRegular";
		color: #445356;
		text-transform: capitalize;
		font-size: 56rpx;
		margin-bottom: 20rpx;
		margin-top: 64rpx;
	}

	.msg_con {
		margin-top: 30rpx;
		padding: 32rpx;
		line-height: 50rpx;
		text-align: initial;
	}

	.msgCon_text {
		display: inline-block;
		max-height: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		text-indent: 56rpx;
		margin-bottom: 24rpx;
		color: #445356;
		font-family: "Microsoft Yahei", Tahoma, Arial, sans-serif;
		font-size: 14px;
	}
	
	.msgCon_text.showTips{
		height: auto;
		overflow: visible;
	}

	.msg_smallCon {
		display: flex;
		align-items: center;
		width: 680rpx;
		height: 106rpx;
		margin: auto;
		margin-bottom: 14rpx;
		border-bottom: 2rpx dashed #cecece;
		border-top: 2rpx dashed #cecece;
	}

	.smallCon_left {
		margin-right: 40rpx;
	}

	.smallCon_left,
	.smallCon_right {
		display: flex;
		align-items: center;
	}

	.smallCon_left .left_img {
		background: url(http://www.51houniao.com/wx/customer/classic/images/small_icon_28.png) no-repeat;
		background-position: 0 -454.68rpx;
		width: 65.625rpx;
		height: 65.625rpx;
		background-size: 300rpx auto;
		vertical-align: middle;
	}

	.smallCon_right .right_img {
		background: url(http://www.51houniao.com/wx/customer/classic/images/small_icon_28.png) no-repeat;
		background-position: 0 -529.6875rpx;
		width: 65.625rpx;
		height: 65.625rpx;
		background-size: 300rpx auto;
		vertical-align: middle;
	}

	.smallCon_left .left_text,
	.smallCon_right .right_text {
		vertical-align: middle;
		font-size: 24rpx;
		padding: 8rpx;
	}

	.msg_swiper {
		width: 680rpx;
		height: 470rpx;
		margin: auto;
	}

	.feiji {
		display: inline-block;
		background: url(http://www.51houniao.com/wx/customer/classic/images/small_icon_28.png) no-repeat;
		width: 65.625rpx;
		height: 65.625rpx;
		background-size: 300rpx auto;
		background-position: -4.6875rpx -4.6875rpx;
		vertical-align: middle;
		margin: 0 10rpx;
	}

	.qiche {
		display: inline-block;
		background: url(http://www.51houniao.com/wx/customer/classic/images/small_icon_28.png) no-repeat;
		width: 65.625rpx;
		height: 65.625rpx;
		background-position: -4.6875rpx -154.6875rpx;
		background-size: 300rpx auto;
		vertical-align: middle;
		margin: 0 10rpx;
	}


	.left_second {
		border-right: 2rpx solid #E7E7E7;
	}


	.kefubtn {
		position: absolute;
		top: 0;
		left: 0;
		width: 100rpx;
		height: 100rpx;
		opacity: 0;
	}

	.left_block {
		display: flex;
	}

	.left_block .left_first,
	.left_first .left_img {
		width: 100rpx;
		height: 100rpx;
	}

	.left_second {
		width: 72rpx;
		height: 92rpx;
		text-align: center;
		color: #888;
		line-height: 42rpx;
		padding: 8rpx 18rpx 0;
	}

	.left_second.cel_icon {
		position: relative;
	}

	.icon-dianhua,
	.icon-lianxikefu {
		position: absolute;
		top: 14rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.cel_num {
		position: absolute;
		bottom: -1rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.icon-shoucang2 {
		display: block;
		font-size: 52rpx;
	}

	.right_block {
		width: 180rpx;
		height: 100rpx;
		background: #ec7a27;
		color: #fff;
		text-align: center;
		line-height: 100rpx;
		font-size: 28rpx;
	}

	.jiage_table {
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
		width: 674rpx;
	}

	.jiage_td {
		width: 240rpx;
	}

	.jiage_td:nth-of-type(2) {
		flex: 1;
	}

	.jiage_td:nth-of-type(3) {
		text-align: center;
	}

	.jiage_td:nth-of-type(3) text {
		color: #f49155;
		margin: 0 20rpx;
	}

	.rec,
	.add {
		width: 40rpx;
		height: 40rpx;
		background-color: #445256;
		border-radius: 50%;
		margin: auto;
		color: #fff;
		text-align: center;
		display: inline-block;
	}

	.all_block {
		margin-top: 24rpx;
		padding: 0 34rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.instructions {
		display: flex;
		flex-direction: column;
		padding: 0 34rpx;
		margin-top: 24rpx;
		margin-bottom: 50rpx;
		padding-bottom: 24rpx;
		box-sizing: border-box;
		color: #C6C6C6;
		font-size: 24rpx;
		border-bottom: 20rpx solid #d8dadb;
	}

	.xiangqing {
		height: max-content;
		background-color: #F2F2F2;
	}

	.not_need {
		padding: 60rpx 0;
		background-color: #F2F2F2;
	}

	.xiangqing_td:first-child {
		width: 380rpx;
	}

	.xiangqing_td:last-child {
		width: 248rpx;
	}

	.side_block {
		position: fixed;
		right: 20rpx;
		bottom: 120rpx;
		width: 100rpx;
	}

	.side_block view {
		width: 90rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		margin-bottom: 10rpx;
		/* border: 1px solid #ccc; */
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.3);
		color: #fff;
	}
	
	.side_block .go_top{
		font-size: 28rpx;
	}

	.side_block view text {
		font-size: 48rpx;
	}

	.go_share {
		position: relative;
	}

	.go_share .go_shareBtn {
		position: absolute;
		top: 0;
		left: 0;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		opacity: 0;
	}

	.item_tabbar {
		display: flex;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 2rpx solid #445356;
		justify-content: space-around;
		color: #aaa;
		font-size: 28rpx;
		font-weight: bold;
		display: none;
		background: #fff;
		width: 100%;
	}

	.ac {
		display: flex;
		position: fixed;
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */

	}

	.active {
		border-bottom: 6rpx solid #445356;
		color: #445356;
	}

	.light_spot_block {
		width: 100%;
	}
	
	.show-or-noshow {
		text-align: center;
		color: #169FE6;
	}
</style>
